<style lang="scss" scoped>
    .mshop-category {
        padding-top: 46px;
        background-color: white;
        height: calc(100% - 101px);
        overflow: hidden;

        .menu {
            width: 5.4em;
            float: left;
            height: 100%;
            overflow: hidden;
            background-color: #eee;
            text-align: center;

            ul {
                list-style-type: none;
                .menu-item {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    padding: .8em .5em;
                }

                .choosed {
                    background-color: white;
                    border-left: 3px solid red;
                }
            }
        }

        .content {
            margin-top: 1em;
            background-color: white;
            margin-left: 4em;
            height: 100%;
            overflow: hidden;

            ul {
                list-style-type: none;

                .content-item {
                    padding-left: 1em;
                    padding-bottom: 2em;

                    .header {
                        text-align: center;
                        padding: 10px 0;
                        color: #666;
                        width: 100%;
                    }

                    .categorys {
                        display: flex;
                        flex-wrap: wrap;
                        $imageSize: 44px;

                        .category {
                            > img, > span {
                                display: block;
                                text-align: center;
                            }

                            img {
                                width: $imageSize;
                                height: $imageSize;
                                padding: 1em 1.1em 0.3em 1.4em;
                            }

                            span {
                                font-size: 14px;
                                color: #666;
                            }
                        }
                    }
                }
            }
        }
    }
</style>

<template>
    <div class="mshop-category">
        <div class="menu" @scroll.stop>
            <scroller v-ref:menu >
                <ul >
                    <li class="menu-item"
                        v-for="menu in menus"
                        :data-id="menu.id"
                        @click="choose_menu(menu)"
                        :class="{'choosed': menu.id == this.current_menu }">
                        {{ menu.name }}
                    </li>
                </ul>
            </scroller>
        </div>

        <div class="content" >
            <scroller :action="content_scroll" v-ref:content>
                <ul>
                    <li class="content-item" v-for="content in contents" :data-id="content.id" >
                        <div class="header" >
                            {{ content.name }}
                        </div>

                        <ul class="categorys">
                            <li
                                class="category"
                                v-for="category in content.categorys"
                                v-link="{path: 'products', query: { categ_id: category.id, categ_name: category.name }, append: true}"
                                track-by="$index" >
                                <img :src="category.img">
                                <span>{{ category.name }}</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </scroller>
        </div>

        <tabbar></tabbar>
    </div>

</template>

<script>
    import Tabbar from 'util-components/tabbar.vue'
    import Scroller from 'util-components/scroller.vue'
    import categoryService from 'services/category'
    import domUtil from 'util/dom'

    const categorys = { img: '/static/4.jpeg', name: '首饰', id: 1 };
    const menu_name = '数码小物';

    let temp_categorys = [];
    for (let j = 1; j < 15; j++) {
        temp_categorys.push(categorys);
    }

    let temp_contents = [];
    let temp_menus = [];

    for (let i = 1; i < 20; i++) {
        temp_menus.push({id: i, name: menu_name});
        temp_contents.push({
            id: i,
            name: menu_name,
            categorys: temp_categorys
        });
    }

    const temp_data = {
        menus: temp_menus,
        contents: temp_contents,
        current_menu: temp_menus[0].id,
    }

    export default {
        ready () {
            const content = document.getElementsByClassName('content')[0];

            this.scroll_x = content.offsetLeft + content.offsetWidth / 2;
            this.scroll_y = content.offsetTop + content.offsetHeight / 3;
        },
        data: () => ({
            contents: [],
            menus: [],
            current_menu: 0,
            scroll_x: 0,
            scroll_y: 0,
        }),
        components: {
            Tabbar,
            Scroller
        },
        methods: {
            choose_menu (menu) {
                if (this.current_menu != menu.id) {
                    this.current_menu = menu.id;

                    const $menu = document.querySelector(`.menu-item[data-id="${menu.id}"]`);
                    const $content = document.querySelector(`.content-item[data-id="${menu.id}"]`);

                    this.$refs.content.$emit('scrollIntoView', $content, true);
                }
            },
            content_scroll (e) {
                const node = document.elementFromPoint(this.scroll_x, this.scroll_y);
                const parentNode = domUtil.parent(node, 'content-item');

                if (parentNode) {
                    if (this.current_menu != parentNode.dataset.id) {
                        this.current_menu = parentNode.dataset.id;
                        const menu = document.querySelector(`.menu-item[data-id="${parentNode.dataset.id}"]`);

                        this.$refs.menu.$emit('scrollIntoView', menu);
                    }
                }
            }
        },
        route: {
            data: ({to}) => {
                return categoryService
                    .fetchs()
                    .then(({data}) => data, () => temp_data);
            }
        }
    }
</script>
